<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML常用标签2</title>
</head>
<body>
    <div>我室友一共div标签，我一个人单独占一行</div>相当于一个大盒子
    <div>我室友一共div标签，我一个人单独占一行</div>
    <span>易烊千玺</span>相当于一个小盒子
    <span>宋仲基</span>
    <span>李易峰</span>
    <span>宋江</span>


    <h2>图像标签和路径（重点）</h2>
    <h3>图像标签的显示</h3>
    <img src="img1.jpg.lnk"/>

    <h3>alt 替换文本，图像显示不出来的时候用文字替换：</h3>
    <img src="img.jpg.lnk" alt="艺妓回忆录"/>

    <h3> title 提示文本，鼠标放到图片上，提示文字为：</h3>
    <img src="img1.jpg.lnk"  alt="艺妓回忆录" title="这是艺妓回忆录中的女主" />

    <h3> width 给图像设置宽度：</h3>
    <img src="img1.jpg.lnk"  alt="艺妓回忆录" title="这是艺妓回忆录中的女主" width="300" />

    <h3> height 给图像设置宽度：</h3>
    <img src="img1.jpg.lnk"  alt="艺妓回忆录" title="这是艺妓回忆录中的女主" height="500" />
    <p>一般在实际开发当中，要么修改宽度，要么修改高度，只需要修改其中一个就行，他会自动根据等比例缩放，不会出现压瘪的现象，不会失真</p>

    <h3> border 给图像设定边框：</h3>
    <img src="img1.jpg.lnk"  alt="艺妓回忆录" title="这是艺妓回忆录中的女主" width="300" border="30"/>

</body>
</html>